<template>
  <div class="systemtion-add-page">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="mini"
      label-width="80px"
    >
      <el-form-item label="事件配置">
        <el-button size="mini" type="primary" @click="onSubmit('form')"
          >保存</el-button
        >
        <el-button size="mini" @click="onCancel">取消</el-button>
      </el-form-item>

      <el-card class="box-card mb15" shadow="never" style="border: 0px">
        <div class="cart-top">
          <span class="step-btn">1</span>
          <span class="title">基本信息</span>
        </div>
        <el-form-item label="事件名称" prop="name">
          <el-input
            v-model="form.name"
            style="width: 280px"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="事件编号" prop="code">
          <el-input
            v-model="form.code"
            style="width: 280px"
            size="mini"
          ></el-input>
        </el-form-item>
      </el-card>
      <el-card class="box-card mb15" shadow="never" style="border: 0px">
        <div class="cart-top">
          <span class="step-btn">2</span>
          <span class="title">告警规则</span>
        </div>
        <div class="rule-box">
          <div
            :class="{ 'rule-item': true, 'rule-expanded': item.expanded }"
            v-for="(item, index) in form.ruleList"
            :key="index"
          >
            <div class="rule-item-top">
              <i
                class="el-icon-caret-right"
                @click="item.expanded = !item.expanded"
              ></i>
              <div class="rule-title">{{ item.name }}</div>
              <div style="flex: 1; display: flex">
                <el-form-item
                  label="规则名称"
                  style="margin-bottom: 0"
                  label-width="120px"
                >
                  <el-input
                    v-model="item.name"
                    placeholder="请输入"
                    style="width: 200px"
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="告警等级"
                  style="margin-bottom: 0"
                  label-width="120px"
                >
                  <el-input-number
                    size="mini"
                    v-model="item.alarmLevel"
                    :min="1"
                    label="告警等级"
                  ></el-input-number>
                </el-form-item>
              </div>

              <!-- <el-tag size="mini">关联</el-tag> -->
              <i
                class="el-icon-error"
                v-if="index > 0"
                @click="delRule(index)"
              ></i>
            </div>
            <div class="rule-item-more" v-show="item.expanded">
              <div class="more-title">规则类型</div>
              <div class="more-box el-form--label-left">
                <el-form-item label="类型：" label-width="110px">
                  <el-radio-group v-model="item.ruleType">
                    <el-radio :label="1">独立规则</el-radio>
                    <!-- <el-radio :label="2">关联其他规则</el-radio> -->
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="添加关联规则："
                  label-width="110px"
                  v-show="item.ruleType == 2"
                >
                  <el-cascader
                    style="width: 150px"
                    :options="item.relevantRule"
                    :props="{ multiple: true }"
                    clearable
                  ></el-cascader>
                  <span class="tip-text">*需同时满足所选规则才可触发告警</span>
                </el-form-item>
              </div>

              <div class="more-title">监控对象</div>
              <div class="more-box el-form--label-left">
                <el-form-item label="类型：" label-width="110px">
                  <el-radio-group v-model="item.monitorObject" @change="(val) =>changeType(val,index)">
                    <el-radio :label="0">模板</el-radio>
                    <el-radio :label="1">实例</el-radio>
                    <el-radio :label="2">数据点</el-radio>
                    <el-radio :label="3">辅机</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="对象：" label-width="110px">
                  <el-select
                    v-show="item.monitorObject==3"
                    v-model="item.wsd"
                    placeholder="选择辅机"
                    size="small"
                    clearable
                    class="mul-selection"
                    style="width: 150px; margin-right: 15px"
                    popper-class="mul-select"
                    collapse-tags
                    :popper-append-to-body="false"
                    @change="(val) => changeFJ(val,index)"
                  >
                    <el-option key="1"  value="温湿度"> 温湿度</el-option>
                    <el-option key="3"  value="电表"> 电表</el-option>
                    <el-option key="2"  value="空压机"> 空压机</el-option>
                  </el-select>

                  <el-select
                    v-show="!(item.monitorObject==3 && (item.wsd == '温湿度' || item.wsd == '空压机'))"
                    v-model="item.gongxu"
                    placeholder="选择工序"
                    size="small"
                    style="width: 120px; margin-right: 15px"
                    clearable
                    @change="(val) => changeGX(val, index)"
                  >
                    <el-option
                      v-for="(item1, index1) in gxOption"
                      :key="index1"
                      :label="item1['key_value']"
                      :value="item1['key_value']"
                    ></el-option>
                  </el-select>

                  <el-select
                    v-show="item.monitorObject==0 || item.monitorObject==2 || (item.monitorObject==3 && item.wsd  !='温湿度')"
                    v-model="item.shebei"
                    placeholder="选择机台"
                    size="small"
                    clearable
                    class="mul-selection"
                    style="width: 150px"
                    popper-class="mul-select"
                    collapse-tags
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="(item1, index1) in item.equipOption"
                      :key="index1"
                      :label=" ((item.monitorObject==3 && item.wsd =='空压机')?'空压机':item.gongxu )+ item1.key_value + '号'"
                      :value="item1.key_value"
                    ></el-option>
                  </el-select>

                   

                  <span
                    style="font-size: 14px; color: #606266; margin-left: 20px"
                  >
                    属性：</span
                  >
                  <el-cascader
                    v-if="item.isShow && !(item.monitorObject==3 && item.wsd  =='温湿度')"
                    v-model="item.shuxing"
                    :ref="'cascaderRef'+ index"
                    placeholder="选择参数类型"
                    size="small"
                    :options="item.shuxingOption"
                    :props="cascaderProps"
                    style="width: 180px; margin-right: 15px"
                    collapse-tags
                    clearable
                  ></el-cascader>
                  <el-select
                    v-if="item.monitorObject==3 && item.wsd=='温湿度'"
                    v-model="item.wsdsx"
                    placeholder="选择属性"
                    style="width: 120px; margin-right: 15px"
                  >
                    <el-option :key="v.value" v-for="v in xswdOption" :value="v.value" :label="v.label"></el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="more-title">触发条件</div>
              <div class="more-box el-form--label-left">
                <el-form-item label="触发类型：" label-width="110px">
                  <el-radio-group v-model="item.triggerType">
                    <el-radio :label="0">立即</el-radio>
                    <el-radio :label="1">延时</el-radio>
                    <el-radio :label="2">累次</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="操作符：" label-width="110px">
                  <el-select
                    v-model="item.operators"
                    placeholder="选择操作符"
                    style="width: 120px"
                  >
                    <el-option key="0" label=">(大于)" :value="0"> </el-option>
                    <el-option key="1" label="<(小于)" :value="1"> </el-option>
                    <el-option key="2" label="=(等于)" :value="2"> </el-option>
                    <el-option key="3" label=">=(大于等于)" :value="3">
                    </el-option>
                    <el-option key="4" label="<=(小于等于)" :value="4">
                    </el-option>
                    <el-option key="5" label="!=(不等于)" :value="5">
                    </el-option>
                  </el-select>
                  <span
                    style="font-size: 14px; color: #606266; margin-left: 20px"
                  >
                    标准值：</span
                  >
                  <el-input
                    v-model="item.standardValue"
                    placeholder="请输入标准值"
                    style="width: 120px; margin-right: 15px"
                    size="mini"
                  ></el-input>
                  <!-- 延时 -->
                  <template v-if="item.triggerType == 1">
                    <span
                      style="font-size: 14px; color: #606266; margin-left: 20px"
                    >
                      延时：</span
                    >

                    <el-input v-model="item.delayTime" style="width: 150px">
                      <el-select
                        style="width: 60px"
                        placeholder="请选择"
                        slot="append"
                        v-model="item.timeUnit"
                      >
                        <!-- <el-option label="秒" value="s">秒</el-option> -->
                        <el-option label="分" value="m">分</el-option>
                      </el-select>
                    </el-input>
                  </template>
                  <!-- 累计次数 -->
                  <template v-if="item.triggerType == 2">
                    <span
                      style="font-size: 14px; color: #606266; margin-left: 20px"
                    >
                      累计次数：</span
                    >
                    <el-input-number
                      style="width: 80px"
                      v-model="item.cumulativeTimes"
                      controls-position="right"
                      :min="1"
                    ></el-input-number>
                  </template>
                </el-form-item>
              </div>

              <div class="more-title">解除设置</div>
              <div class="more-box el-form--label-left">
                <el-form-item label="解除类型：" label-width="110px">
                  <el-radio-group v-model="item.relieveType">
                    <el-radio :label="0">恢复到规则</el-radio>
                    <el-radio :label="1">定时自动</el-radio>
                    <el-radio :label="2">手动解除</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="item.relieveType == 1" label="解除条件：" label-width="110px">
                  <span
                    style="font-size: 14px; color: #606266; margin-left: 20px"
                  >
                    时间：</span
                  >
                  <el-input v-model="item.time" style="width: 150px">
                    <el-select
                      style="width: 60px"
                      placeholder="请选择时间"
                      slot="append"
                      v-model="item.timeUnit"
                    >
                      <!-- <el-option label="秒" value="s">秒</el-option> -->
                      <el-option label="分" value="m">分</el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
        <el-button
          style="margin-left: 30px"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addRule"
          >新建规则</el-button
        >
      </el-card>
      <el-card class="box-card" shadow="never" style="border: 0px">
        <div class="cart-top">
          <span class="step-btn">3</span>
          <span class="title">告警服务</span>
        </div>
        <el-form-item label="通知对象" prop="selectedUser">
          <div class="user-selected" @click="showUserSelect">
            <img :src="require(`@/assets/img/icon-user.png`)" />
            <div class="selected-name" v-if="form.selectedUser.length > 0">
              <span v-for="(item, index) in form.selectedUser" :key="index"
                >{{ item.name }}；</span
              >
            </div>
            <div class="selected-name placeholder" v-else>请选择通知对象</div>
            <a class="btn-clear" @click.stop="onClear">清空</a>
          </div>
          <user-select ref="userSelect" @ok="handleChange"></user-select>
        </el-form-item>
        <el-form-item label="通知方式">
          <el-checkbox-group v-model="form.fangshi">
            <el-checkbox :label="1">系统消息</el-checkbox>
            <el-checkbox :label="2">短信</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="消息模版">
          <el-row type="flex">
            <el-col style="width:300px">
              <el-input
                style="width: 280px"
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="form.messageTemplate"
              >
              </el-input>
            </el-col>
            <el-col class="line" style="margin-left:30px;width:80px;font-size: 14px;color: #606266;">模板变量</el-col>
            <el-col :span="11">
              <div class="template-box">
                <div class="item-box">
                  <div class="title">事件名称：</div>
                  <div class="content">EventName</div>
                   <div class="title">数据源：</div>
                  <div class="content">DataSource</div>
                </div>
                 <div class="item-box">
                  <div class="title">告警名称：</div>
                  <div class="content">WarnName</div>
                  <div class="title">告警编码：</div>
                  <div class="content">WarmCode</div>
                </div>
                 <div class="item-box">
                  <div class="title">属性：</div>
                  <div class="content">ValueName</div>
                  <div class="title">触发采集值：</div>
                  <div class="content">CollectionValue</div>
                </div>
                <div class="item-box">
                  <div class="title">触发时间：</div>
                  <div class="content">Time</div>
                </div>
                
              </div>
            </el-col>
           </el-row>
        </el-form-item>
        <el-form-item label="订阅地址">
          <el-input
            style="width: 280px"
            placeholder="请输入订阅地址"
            v-model="form.receiveUrl"
          >
          </el-input>
        </el-form-item>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import UserSelect from '@/components/UserSelect';
import { alarmConfig, getAlarmConfigDetail } from '@/api/alarm';
import {
  getSysDict,
  getParams1,
  getParams2,
  getSysDictByName,
} from '@/api/common';
const ruleData = {
  id:0,
  expanded: false,
  name: '规则1',
  alarmLevel: 1, //告警等级
  ruleType: 1, //1独立规则 2关联其他规则
  relevantRule: [], // 关联规则
  monitorObject: 0, //0模板 1实例 2数据点
  gongxu: '', //工序
  shebei: '', //设备
  wsd:'温湿度', //温湿度
  wsdsx:'', //温湿度属性
  shuxing: [], //属性
  triggerType: 0, //0立即 1延时 2累计次数
  operators: 0, //操作符
  standardValue: '', //标准值
  delayTime: 0, //延迟时间
  timeUnit: 'm',
  cumulativeTimes: 1, //累计次数
  relieveType: 0, //0恢复到规则 1定时自动 2手动解除
  equipOption: [], //机台列表
  shuxingOption: [], //属性列表
  time: 1, //解除时间
  isShow:true
};
export default {
  components: {
    UserSelect,
  },
  data() {
    return {
      form: {
        id: 0,
        name: '',
        code:'',
        isActive: true,
        ruleList: [
          {
            id: 0,
            expanded: true,
            name: '规则1',
            alarmLevel: 1, //告警等级
            ruleType: 1, //1独立规则 2关联其他规则
            relevantRule: [
              {
                value: 0,
                label: '全选',
              },
              {
                value: 1,
                label: '规则1',
              },
            ], // 关联规则
            monitorObject: 0, //0模板 1实例 2数据点
            gongxu: '', //工序
            shebei: '', //设备
            wsd:'温湿度', //温湿度
            wsdsx:'', //温湿度属性
            shuxing: [], //属性
            triggerType: 0, //0立即 1延时 2累计次数
            operators: 0, //操作符
            standardValue: '', //标准值
            delayTime: 0, //延迟时间
            timeUnit: 'm',
            cumulativeTimes: 1, //累计次数
            relieveType: 0, //0恢复到规则 1定时自动 2手动解除
            equipOption: [], //机台列表
            shuxingOption: [], //属性列表
            time:1,
            isShow:true
          },
        ],
        fangshi: [1],
        selectedUser: [], //通知对象
        messageTemplate: '', //消息模板
        receiveUrl: '', //订阅地址
      },
      rules: {
        name: [{ required: true, message: '请输入事件名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入事件编号', trigger: 'blur' }],
        selectedUser: [
          { required: true, message: '请选择接受对象', trigger: 'change' },
        ],
      },
      cascaderProps: {
        lazy: true,
        multiple: false,
        label: 'label',
        lazyLoad: async (node, resolve) => {
          
          if (node.level) {
            let form = {
              gongxu: node.data.gongxu,
              cs_type: node.data.cs_type,
            };
            const { data } = await getParams2(form);
            data.map((item) => {
              item.label = item['cs_name'];
              item.value = item['cs'];
              item.leaf = true;
            });
            resolve(data);
          }
        },
      },
      xswdOption:[
        {value:'xswd1',label:'细纱1温度'},
        {value:'xssd1',label:'细纱1湿度'},
        {value:'xswd2',label:'细纱2温度'},
        {value:'xssd2',label:'细纱2湿度'},
        {value:'xswd3',label:'细纱3温度'},
        {value:'xssd3',label:'细纱3湿度'},
        {value:'xswd4',label:'细纱4温度'},
        {value:'xssd4',label:'细纱4湿度'},
        {value:'xswd5',label:'细纱5温度'},
        {value:'xssd5',label:'细纱5湿度'},
        {value:'xswd6',label:'细纱6温度'},
        {value:'xssd6',label:'细纱6湿度'},
        {value:'ltwd8',label:'络筒8温度'},
        {value:'ltsd8',label:'络筒8湿度'},
        {value:'ltwd9',label:'络筒9温度'},
        {value:'ltsd9',label:'细纱9湿度'}
      ]
    };
  },
  computed: {
    cjOption() {
      return this.$store.getters.cjOption;
    },
    orgOption() {
      return this.$store.getters.orgOption;
    },
    gxOption() {
      return this.$store.getters.gxOption;
    },
  },
  created() {
    if (this.$route.query.id > 0) {
      this.form.id = this.$route.query.id;
      this.getConfigInfo();
    }
  },
  methods: {
    async getConfigInfo() {
      let res = await getAlarmConfigDetail({
        id: this.form.id,
      })

      if (res.code == 1) {
          let data = res.data
          this.form.id = data.id
          this.form.name = data.name
          this.form.code = data.code
          this.form.isActive = data.isActive
          this.form.noticesId = data.notices[0].id
          this.form.receiveUrl = data.notices[0].receiveUrl
          this.form.messageTemplate = data.notices[0].messageTemplate
          this.form.fangshi = JSON.parse(data.notices[0].receiverMethodsJson)
          this.form.selectedUser = JSON.parse(data.notices[0].receiversJson)
          this.form.ruleList = []
          data.rules.forEach(async (item,index) =>{
            let rule = Object.assign({}, ruleData);
            rule.id = item.id
            rule.name = item.name
            rule.alarmLevel = item.level
            rule.monitorObject = item.monitorType
            let monitorValue = JSON.parse(item.monitorValue)
            rule.gongxu = monitorValue.dicBh
            rule.wsd = item.monitorType==3 ? monitorValue.dicBh :'温湿度'
             if(item.monitorType==3) {
               rule.wsdsx = monitorValue.cs
               if(monitorValue.dicBh == '电表' && monitorValue.condition){
                 let condition = monitorValue.condition.find((item) => item.key =='gongxu')
                 rule.gongxu = condition ? condition.value:''
               }
             }
            rule.shebei = monitorValue.devSn
            rule.shuxing = [monitorValue.csName,monitorValue.cs]

            rule.relieveType = item.relieveType
            rule.triggerType = item.triggerType
            let triggerValue = JSON.parse(item.triggerValue)
            rule.operators = triggerValue.operator
            rule.standardValue = triggerValue.standard
            rule.cumulativeTimes = triggerValue.number
            rule.delayTime = triggerValue.delay
            rule.isShow = false

           
            
            this.form.ruleList.push(rule)
            await this.changeGX(rule.gongxu,index)
            //处理设备选中问题
            const { data } = await getParams2({gongxu: rule.wsd == '电表'? '电表':rule.gongxu, cs_type: monitorValue.csName});
            this.form.ruleList[index].shuxingOption.forEach(d =>{
              if(d.value ==  monitorValue.csName){
               
                d.children =  data.map((d1) => {
                  return {
                    label: d1['cs_name'],
                    value: d1['cs'],
                    leaf: true
                  }
                });
              }
            })
            this.form.ruleList[index].isShow = true;
          })
        } else {
          this.$message.error('获取详情失败');
        }
    },
    async changeGX(val, index) {
      await this.getParams(val, index);
      this.form.ruleList[index].devSn = [];
      if (val) {
        let name = val == '空压机' ? val : (val + '设备')
        const res = await getSysDictByName(name);
        if (res.code == 1 &&res.data.dataList.length>0) {
          let bh = res.data.dataList[0]['bh'];
          this.getEquip(bh, index);
        } else {
            this.form.ruleList[index].shebei = ''
            this.form.ruleList[index].equipOption = [];
          }
      } else {
         this.form.ruleList[index].shebei = ''
        this.form.ruleList[index].equipOption = [];
      }
    },
    async changeFJ(val,index){
      if(val == '电表'){
        this.getParams(val, index);
      }
      if(val == '空压机'){
        this.changeGX(val,index)
      }
    },
    changeType(val,index){
      if(val == 3 ) {
         this.changeGX(this.form.ruleList[index].wsd,index)
      }else{
         this.changeGX(this.form.ruleList[index].gongxu,index)
      }
    },
    async getParams(val, index) {
      let gongxu = (this.form.ruleList[index].wsd == '电表' && this.form.ruleList[index].monitorObject ==3) ?'电表' : val
      const { data } = await getParams1({ gongxu: gongxu });
      let arr = [];
      data.map((item) => {
        let obj = Object.assign({}, item);
        obj.label = item.cs_type;
        obj.value = item.cs_type;
        arr.push(obj);
      });
      console.log(arr);
      this.form.ruleList[index].shuxingOption = arr;
    },
    async getEquip(val, index) {
      const equipData = await getSysDict(val);
      this.form.ruleList[index].equipOption = equipData.data.dataList;
    },
    addRule() {
      let data = Object.assign({}, ruleData);
      data.name = '规则' + (this.form.ruleList.length + 1);
      this.form.ruleList.push(data);
    },
    delRule(index) {
      this.form.ruleList.splice(index, 1);
    },
    onCancel(){
      this.$router.push({
        path: '/Systemtion',
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = this.form;
          let rules = formData.ruleList.map((item) => {
            let monitoringValue = {
                dicBh: item.gongxu,
                devSn: item.shebei,
                cs: item.shuxing.length>0 ? item.shuxing[1]: '',
                csName:item.shuxing.length>0 ?item.shuxing[0] : '',
              }
              //辅机
              if(item.monitorObject === 3){
                monitoringValue.dicBh = item.wsd
                 if(item.wsd == '温湿度') {
                  monitoringValue.cs = item.wsdsx
                }
                monitoringValue.table = 'wenshidu_table'
                if(item.wsd == '电表') {
                  monitoringValue.table = 'dian_table'
                  monitoringValue.condition = [{key:"gongxu",value: item.gongxu}]
                }
                if(item.wsd == '空压机') {
                  monitoringValue.table = 'yaliji_table'
                }
              }
            return {
              id:item.id,
              level: item.alarmLevel,
              monitoringType: item.monitorObject,
              monitoringValue: JSON.stringify(monitoringValue),
              name: item.name,
              relieveType: item.relieveType,
              relieveValue: JSON.stringify({
                time: item.time,
              }),
              triggerType: item.triggerType,
              triggerValue: JSON.stringify({
                operator: item.operators,
                standard: item.standardValue, //  标准值
                number: item.cumulativeTimes, //累计次数
                delay: item.delayTime
              }),
            };
          });
          let data = {
            isActive: formData.isActive,
            name: formData.name,
            code: formData.code,
            notices: [
              {
                messageTemplate: formData.messageTemplate,
                receiveUrl: formData.receiveUrl,
                receiverMethodsJson: JSON.stringify(formData.fangshi),
                receiversJson: JSON.stringify(formData.selectedUser),
              },
            ],
            rules: rules,
          };
          let cmd = 'add'
          let text = '添加'
          console.log(this.form.noticesId);
          if(this.form.id>0) {
            data.id = this.form.id
            data.notices[0].id = this.form.noticesId
            cmd = 'update'
            text = '更新'
          }
          alarmConfig(cmd, data).then((res) => {
            if (res.code == 1) {
              this.$message.success(`${text}成功`);
              setTimeout(() => {
                this.$router.push({
                  path: '/Systemtion',
                });
              }, 2000);
            } else {
              this.$message.error(`${text}失败`);
            }
          });
        } else {
          return false;
        }
      });
    },
    handleChange(data) {
      this.form.selectedUser = data;
      this.$refs.form.clearValidate('selectedUser');
    },
    onClear() {
      this.form.selectedUser = [];
      this.$refs.form.clearValidate('selectedUser');
    },
    showUserSelect() {
      this.$refs.userSelect.show();
    },
  },
};
</script>

<style lang="scss" scope>
.systemtion-add-page {
  background: #f6f9fc;
  height: 100%;
  .el-form {
    background: #f6f9fc;
  }
  .cart-top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .step-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #448ef7;
      color: #fff;
      margin-right: 15px;
      font-size: 14px;
      line-height: 24px;
      text-align: center;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .rule-box {
    background: #ffffff;

    margin: 15px 30px;
    width: 900px;
    .rule-item {
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      border: 1px solid #d9d9d9;
      margin-bottom: 10px;
      .rule-item-top {
        display: flex;
        padding: 15px;
        height: 50px;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        .el-icon-caret-right {
          padding: 15px;
          box-sizing: border-box;
          color: #606d86;
          font-size: 20px;
          cursor: pointer;
        }
        .rule-title {
          color: #2d323d;
        }
        .el-icon-error {
          margin-left: 40px;
          font-size: 18px;
          color: #f5a623;
          width: 40px;
        }
      }
      .rule-item-more {
        padding: 15px;
        border-top: 1px solid #d9d9d9;
        .more-title {
          font-size: 14px;
          color: #2d323d;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          padding: 10px;
        }
        .more-box {
          background: #f7f7f8;
          border-radius: 4px;
          padding: 15px;
          margin-bottom: 10px;
          .tip-text {
            margin-left: 15px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #8a909e;
          }
        }
      }
      &.rule-expanded {
        .el-icon-caret-right {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
      }
    }
  }
  .user-selected {
    display: flex;
    border: 1px solid #cfd4d8;
    border-radius: 4px;
    width: 500px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 24px;
    align-items: center;
    img {
      width: 16px;
      height: 19px;
      margin-right: 10px;
    }
    .selected-name {
      flex: 1;
      margin-right: 10px;
      font-size: 12px;
      line-height: 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      &.placeholder {
        color: #c0c4cb;
      }
    }
    .btn-clear {
      cursor: pointer;
      color: #448ef7;
    }
  }
  .template-box{
    width: 443px;
    height: 122px;
    background: #F7F7F8;
    border-radius: 3px;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    flex-direction: column;
    .item-box {
      font-weight: 400;
      color: #48556A;
      line-height: 26px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .title{
        margin-left: 10px;
        width: 85px;
      }
      .content{
         margin:0 20px 0 5px;
      }
    }
  }
}
</style>